import { FC, useEffect, useState } from "react";

// 引入组件
import Banner from "../../components/Banner";

// 引入资源
import styles from './styles.module.scss'
import { Breadcrumb } from 'antd';
import { Link, useSearchParams, useLocation, useNavigate } from "react-router-dom";

// 引入请求
import { reqCategory } from "../../api/Category";

//引入类型
import { CategoryData } from "../../api/Category/type";


const Category: FC = () => {
    // 获取传过来的id
    const [searchParams] = useSearchParams();
    const id = searchParams.get('id');

    const [CategoryData, SetCategoryData] = useState<CategoryData>()

    // 获取要监听的路由对象
    const Location = useLocation();
    const Navigate = useNavigate()




    // 获取该目录下数据
    const getCategoryData = () => {
        reqCategory(id as string).then((res) => {
            SetCategoryData(res.result)
        })
    }

    // 跳转二级目录
    const goCategorySub = (id: string) => {
        Navigate(`/category/sub?id=${id}`, {
            replace: false,
        })
    }

    // 跳转商品详细

    const goToGoodsInfo = (id: string) => {
        Navigate(`/product?id=${id}`, {
            replace: false
        })
    }


    useEffect(() => {
        getCategoryData()
        return () => {

        }
    }, [Location]/*监听路由参数发生变化重新获取数据*/)

    return (
        <div className={styles.Category}>
            {/* 面包屑 */}
            <div className={styles.bread}>
                <Breadcrumb
                    items={[
                        {
                            title: <Link to={'/home'}>首页</Link>,
                        },
                        {
                            title: CategoryData?.name
                        },
                    ]}
                />
            </div>
            {/* 轮播图 */}
            <Banner />
            {/* 全部分类 */}
            <div className={styles.allCategories}>
                <span>全部分类</span>
                <div>
                    {
                        CategoryData?.children.map((item) => {
                            return (
                                <div key={item.id} onClick={() => {
                                    goCategorySub(item.id)
                                }}>
                                    <img src={item.picture} alt="" />
                                    <span>{item.name}</span>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
            {/* 分类详细 */}
            {
                CategoryData?.children.map((item) => {
                    return (
                        <div className={styles.DetailedClassification} key={item.id}>
                            <div className={styles.title}>
                                <span>-{item.name}-</span>
                                <span>温暖柔软,品质之选</span>
                            </div>
                            <div className={styles.content}>
                                {
                                    item.goods.map((good) => {
                                        return (
                                            <li className={styles.goods} key={good.id} onClick={() => {
                                                goToGoodsInfo(good.id)
                                            }}>
                                                <img src={good.picture} alt="" />
                                                <div>
                                                    <span>{good.name}</span>
                                                    <span>{good.desc}</span>
                                                    <span>￥{good.price}</span>
                                                </div>
                                            </li>
                                        )
                                    })
                                }
                            </div>
                        </div>
                    )
                })
            }
        </div>
    )
}

export default Category